<template>
  <div>
    <el-dialog
      :title="this.$t('common.details')"
      :visible.sync="Visible"
      width="80%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Line_name')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                :placeholder="$t('common.input_plactholder')"
                v-model="data.name_current"
              ></el-input>
              <img  @click="setLineName" style="width:36px;marginLeft: 5px;cursor: pointer;" src="@/assets/img/设置.png" alt="">
            </div>
          </div>
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Business_type')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                v-model="data.type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_business"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Inherit_Line')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                v-model="data.parent_id"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_line"
                  :key="item.id"
                  :label="item.name_current"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <div :style="{marginLeft: '5px',whiteSpace: 'nowrap',color: data.parent_id!=0?'#62afff':'#8f9193',cursor: data.parent_id!=0?'pointer':'not-allowed'}" @click="details">{{$t('common.details')}}</div>
            </div>
          </div>
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              {{$t('LineManagementLang.Partners')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                v-model="data.enterprise"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_Partners"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Origin')}}:
            </div>
            <div class="contant">
              <Multiselect
              :isDoubleJudge="true"
                :select_label="'name_current'"
                :Multi_disabled="true"
                :select_model="data.start_local"
                :select_options="options_str"
              >
              </Multiselect>
              <div :style="{marginLeft: '5px',whiteSpace: 'nowrap',color: data.parent_id!=0?'#62afff':'#8f9193',cursor: data.parent_id!=0?'pointer':'not-allowed'}" @click="setCity('start')">{{$t('LineManagementLang.configuration')}}</div>
            </div>
          </div>
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              {{$t('LineManagementLang.Partners')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                v-model="data.country_name"
              ></el-input>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.destination')}}:
            </div>
            <div class="contant">
              <Multiselect
                :isDoubleJudge="true"
                :select_label="'name_current'"
                :Multi_disabled="true"
                :select_model="data.target_local"
                :select_options="options_end"
              >
              </Multiselect>
              <div :style="{marginLeft: '5px',whiteSpace: 'nowrap',color: data.parent_id!=0?'#62afff':'#8f9193',cursor: data.parent_id!=0?'pointer':'not-allowed'}" @click="setCity('target')">{{$t('LineManagementLang.configuration')}}</div>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.IsBrand')}}:
            </div>
            <div class="contant">
             <el-select
                disabled
                v-model="data.is_brand"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_IsBrand"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
、        </div>
        <div class="dialogBoxItem">
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Delivery_method')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                multiple
                v-model="data.dispatch_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_delivery"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Pickup_method')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                multiple
                v-model="data.pickup_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_pickup"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.weight_type')}}:
            </div>
            <div class="contant">
              <el-select
                disabled
                v-model="data.weight_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_weight_type"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              {{$t('LineManagementLang.Bubble_weight')}}:
            </div>
            <div class="contant">
              <el-input-number
                disabled
                controls-position="right"
                size="small" 
                :min="1" 
                :precision="0"
                v-model="data.weight_calc_rule">
              </el-input-number>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.lifting_weight')}}:
            </div>
            <div class="contant">
              <el-input-number
                disabled
                controls-position="right"
                size="small" 
                :min="0"  
                :precision="1"
                v-model="data.start_weight">
              </el-input-number>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.extension_weight')}}:
            </div>
            <div class="contant">
              <el-input-number
                disabled
                controls-position="right"
                size="small" 
                :min="0"  
                :precision="1"
                v-model="data.renew_weight">
              </el-input-number>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.lifting_volume')}}:
            </div>
            <div class="contant">
              <el-input-number
                disabled
                controls-position="right"
                size="small" 
                :min="0"  
                :precision="3"
                v-model="data.start_volume">
              </el-input-number>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.extension_volume')}}:
            </div>
            <div class="contant">
              <el-input-number
                disabled
                controls-position="right"
                size="small" 
                :min="0"  
                :precision="3"
                v-model="data.renew_volume">
              </el-input-number>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:24%;flex-direction: row;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Line_Pic')}}:
            </div>
            <div class="contant">
              <img style="width:80px;height:80px;border-radius:6px;border:1px dashed #777;cursor: zoom-in;" @click="look_img" :src="!!data.logo?this.$baseUrl+data.logo:''" alt="">
            </div>
          </div>
           <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Order_prefix')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                v-model="data.order_prefix"
              ></el-input>
            </div>
          </div>
          <div style="width:24%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Package_prefix')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                v-model="data.package_prefix"
              ></el-input>
            </div>
          </div>
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Line_Text')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                ref="intro_current"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.intro_current"
              ></el-input>
              <img  @click="setLineText" style="width:36px;marginLeft: 5px;cursor: pointer;" src="@/assets/img/设置.png" alt="">
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:24%" class="dialogBoxItemRow">
            <div class="title">
              <div v-if="data.type!=1" class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.payment_method')}}:
            </div>
            <div class="contant">
              <el-select
                v-if="data.type!==1"
                disabled
                v-model="data.pay_type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_payment"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-switch
                v-else
                disabled
                v-model="data.pay_type_flag"
                active-color="#26BD00"
                inactive-color="#c0c4cc"
                :active-value='1'
                :inactive-value='0'
                >
              </el-switch>
            </div>
          </div>
          <div style="width:75%;" class="dialogBoxItemRow">
            <div class="title">
              {{$t('LineManagementLang.Line_tip')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                ref="tip_current"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.tip_current"
              ></el-input>
              <img  @click="setLinePrompt" style="width:36px;marginLeft: 5px;cursor: pointer;" src="@/assets/img/设置.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <SetLineName
      ref="setLineName"
    ></SetLineName>
    <SetLineText
      ref="setLineText"
    ></SetLineText>
    <SetLinePrompt
      ref="setLinePrompt"
    ></SetLinePrompt>
    <DetailsTwo
      ref="details"
    ></DetailsTwo>
    <SetCity
      ref="setCity"
    ></SetCity>
  </div>
</template>

<script>
import SetLineName from "./LineManagement_setLineName";
import SetLineText from "./LineManagement_setLineText";
import SetLinePrompt from "./LineManagement_setLinePrompt";
import DetailsTwo from "./LineManagement_details_two";
import SetCity from "./LineManagement_setCity";
export default {
  components: {
    SetLineName,
    SetLineText,
    SetLinePrompt,
    DetailsTwo,
    SetCity,
  },
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      id:'',
      data: {},
      options_Partners:[],
      options_business:[],
      options_line:[],
      start_option_arr:[],//始发的
      end_option_arr_express:[],//目的地（快递）
      end_option_arr_delivery:[],//目的地（快运）
      options_str:[],
      options_end:[],
      options_IsBrand:[],
      options_delivery:[],   
      options_pickup:[],   
      options_payment:[],
      options_weight_type:[],
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.options_str =[]
      this.options_end =[]
      this.id=data.id
      this.data.enterprise=data.enterprise
      this.getOptios()
      this.Visible = true;
    },
    //获取单条
    getData() {
      this.$get("lineInfo", { id: this.id }).then((res) => {
        this.data = res.data;
        this.data.start_local=this.strToArr(res.data.start_local)
        this.data.target_local=this.strToArr(res.data.target_local)
        this.data.dispatch_type=this.strToArr(res.data.dispatch_type)
        this.data.pickup_type=this.strToArr(res.data.pickup_type)
        if(this.data.parent_id===0){
          this.options_str=this.start_option_arr
          if(this.data.type===0){
            this.options_end=this.end_option_arr_express
          }else{
            this.options_end=this.end_option_arr_delivery
          }
        }else{
          this.options_str =res.data.start_local_arr
          this.options_end =res.data.target_local_arr
        }
        this.start_option_arr.forEach(el=>{
          let key=this.data.start_bind_address.findIndex(ite=>{return ite.id==el.id})
          if(this.data.start_bind_address.length>0&&key!=-1){
            el.bind_id=this.data.start_bind_address[key].bind_id
          }else{
            el.bind_id=''
          }
          el.isTrue=true
        })
        this.end_option_arr_express.forEach(el=>{
          let key=this.data.target_bind_address.findIndex(ite=>{return ite.id==el.id})
          if(this.data.target_bind_address.length>0&&key!=-1){
            el.bind_id=this.data.target_bind_address[key].bind_id
          }else{
            el.bind_id=''
          }
          el.isTrue=true
        })
        this.end_option_arr_delivery.forEach(el=>{
          let key=this.data.target_bind_address.findIndex(ite=>{return ite.id==el.id})
          if(this.data.target_bind_address.length>0&&key!=-1){
            el.bind_id=this.data.target_bind_address[key].bind_id
          }else{
            el.bind_id=''
          }
          el.isTrue=true
        })
        if(this.options_str.length>0){
          this.options_str.forEach(item=>{
            let arr=res.data.hide_start_local.split(',').filter(el=>{return el==item.id})
            if(arr.length>0){
              item.isTrue=false
            }
          })
        }
        if(this.options_end.length>0){
          this.options_end.forEach(item=>{
            let arr=res.data.hide_target_local.split(',').filter(el=>{return el==item.id})
            if(arr.length>0){
              item.isTrue=false
            }
          })
        }
        this.$get("parentLines", {type:this.data.type}).then((res) => {
          this.options_line = res.data;
          this.options_line.unshift({id:0,name_current:this.$t('common.not_have')})
        });
      });
    },
    look_img(){
      eventBus.$emit("imgViewer",[this.$baseUrl+this.data.logo]);
    },
    setCity(type){
      if(this.data.parent_id!=0){
        let parent_line_str=[]
        let parent_line_end=[]
        let arr=this.options_line.filter(item=>{return item.id===this.data.parent_id})
        if(arr.length>0){
          parent_line_str =JSON.parse(JSON.stringify(arr[0].start_local_arr))
          parent_line_end =JSON.parse(JSON.stringify(arr[0].target_local_arr))
        }
        if(type=='start'){
          this.$refs.setCity.init('start_option_arr',this.start_option_arr,parent_line_str,true)
        }else if(type=='target'){
          if(this.data.type===0){
            this.$refs.setCity.init('end_option_arr_express',this.end_option_arr_express,parent_line_end,true)
          }else{
            this.$refs.setCity.init('end_option_arr_delivery',this.end_option_arr_delivery,parent_line_end,true)
          }
        }
      }
    },
    strToArr(data){
      let arr=data.split(',')
      return arr.map(item=>{return Number(item)})
    },
    //获取下拉单数据
    getOptios(){
      let obj={}
      if(!!this.data.enterprise){
        obj.enterprise_id=this.data.enterprise
      }
      this.$get("visibleAddress",obj).then((res) => {
        this.start_option_arr = res.data.start_local;
        this.end_option_arr_express = res.data.target_local;
        this.end_option_arr_delivery = res.data.main_local;
        this.getData();
      });
      this.$get("lineSysItems").then((res) => {
        this.options_business = res.data.business_type;
        this.options_IsBrand = res.data.is_brand;
        this.options_delivery = res.data.dispatch_type;
        this.options_pickup = res.data.pickup_type;
        this.options_payment = res.data.line_pay_type;
        this.options_weight_type = res.data.line_weight_type;
      });
      this.$get("getEnterprise").then((res) => {
        this.options_Partners = res.data;
      });
    },
    setLineName(){
      let obj={
        Line_name_zh:this.data.name,
        Line_name_en:this.data.name_en,
        Line_name_ru:this.data.name_ru,
      }
      this.$refs.setLineName.init(obj,'details')
    },
    details(){
      if(this.data.parent_id!=0){
        this.$refs.details.init({id:this.data.parent_id})
      }
    },
    setLineText(){
      let obj={
        Line_text_zh:this.data.intro,
        Line_text_en:this.data.intro_en,
        Line_text_ru:this.data.intro_ru,
      }
      this.$refs.setLineText.init(obj,'details')
    },
    setLinePrompt(){
      let obj={
        Line_tip_zh:this.data.tip,
        Line_tip_en:this.data.tip_en,
        Line_tip_ru:this.data.tip_ru,
      }
      this.$refs.setLinePrompt.init(obj,'details')
    },
    //取消
    cancel() {
      window.setTimeout(()=>{
        this.data = {};
      },100)
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
  },
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__wrapper{
  .el-dialog{
    min-width: 800px;
  }
}
</style>